MailChimp WordPress Plugin with React: AJAX & React

We can show our MailChimp Form with a widget that we have made in the last tutorial. In this tutorial, you will learn how to code the whole interaction with the form using React.

This tutorial is part of a series MailChimp WordPress Plugin with React:

1. MailChimp WordPress Plugin with React: Introduction
2. MailChimp WordPress Plugin with React: Settings & Custom Post Type
3. MailChimp WordPress Plugin with React: Metabox & MailChimp Lists
4. MailChimp WordPress Plugin with React: The Form and Form Submission
5. MailChimp WordPress Plugin with React: MailChimp Widget
6. MailChimp WordPress Plugin with React: AJAX & React

Before we start to write our JavaScript, we need to enqueue our new script and also have some other helper functions to process the AJAX request.

New Hooks for AJAX and React

Let’s go back to our main plugin file and extend our main class with some hooks:

The first hook is wp_enqueue_scripts. We are hooking the method enqueue from our main class. The other two hooks are used for AJAX calls. The second AJAX hook has the nopriv word so that we can also process AJAX calls for non logged-in users. The function mwp_subscribe_user_on_ajax will subscribe the user on AJAX request.

We now need to define all those methods and functions.

Enqueueing our React file

Our JavaScript file will be named mwp.js. Create the folder assets in the main plugin folder and create the mwp.js inside that folder. Let’s define the method enqueue:

Before enqueueing our script, we are registering so that we can also define a global JavaScript object mwp_object that we can then use inside our file. After we have defined every parameter in our object, we are enqueuing it.

Subscribing the User from AJAX

When our visitor subscribes from our MailChimp form, we will create an AJAX request to our site. The action hooks for AJAX calls will be activated and our function mwp_subscribe_user_on_ajax will process the request.

Open the file inc/functions-form.php and add this code to the end of it:

We are getting the variable values from the superglobal $_POST variable. When the variables $form_id, $name and $email are filled (or even not), we are passing them to our previously defined function mwp_subscribe_user.

The result we get from that function is then echoed in a JSON format. We also call the function wp_die() at the end so that nothing else is processed on the backend.

Handling the Form with React

This part is probably the most wanted one in this tutorial:) To work with React and manipulate the DOM, we need React and ReactDOM. We will add those scripts in a minified form in our mwp.js:

If you look at the method render in our class MWP_Form, you will see that we wrap our form with a class .mwp-subscribe-form. This class will be used to render our React form inside it.

This will also remove previously defined form from the DOM. Why did we render it in the first place? To let visitors without JavaScript also subscribe to our MailChimp list 🙂

Add the next code at the bottom of the file mwp.js:

Creating the form

The variable ReactForm is a class that will be used for rendering a the form in JavaScript. Variable reactForms is global and it will hold every instance of our form. This is done because of WordPress widgets that can be used more than once.

In that class we are also creating an initial state. This state will hold the button text which we are getting from the global object mwp_object. The state also contains an empty array of errors and a boolean subscribing parameter.

We are then getting all the HTML elements with the class .mwp-subscribe-form. For each of those elements, we are creating a new DOM with ReactDOM in which we create a new React element. In this element we provide our new type ReactForm.

This new React Element also has a property attribute id that holds the form ID. This will be our reference property so that we know to which form we need to subscribe our visitor.

Rendering the Form

To render the form, we need to create the logic behind it inside the method render:

In this method, we are checking if there are any errors in the state. If there are, for each error we are creating a li element with the error message inside. If the variable errors is not empty, we are creating an error container that is an ul with all the errors (li) inside.

At the end we are returning a React element with a few properties and all the other elements needed inside (error container, input fields and submit field). The properties that are set are:

• name – the form name attribute, accessible from global window object
• onSubmit – an event that will call a function when a user submits the data
• method – the form method attribute
• action – the form action attribute

Checking the Form Fields

Before we create an AJAX request, we need to check the fields so that we don’t create an AJAX request with empty fields. This will be done in a custom function checkFields:

In this function we are setting a few variables. The first one is order which we have provided when creating the forms for each widget. This is used to select the right form using the global object window.

If we have more than one form, we will then get it by using the window.mwpSubscribeForm. If the fields $name and $email are empty, then we will set the state with those errors.

Creating the AJAX Request

This is the last method we have to create inside our React class. This one will be called when the visitor tries to subscribe. Add it to the code:

We are first checking the fields and if there are no errors, we are creating a data object that will be sent with the AJAX request.

When the AJAX request is done, we are checking if the response was a success. If it was, then we are getting the redirect link and we redirect the subscriber to that url. If there are some error, we are setting them in the state.

Conclusion

This was the last part of our WordPress MailChimp plugin. In this series we have learned a lot, from building a simple basic plugin to extending it to a complete solution for subscribing. Did you find something that is missing? Do please say it in the comments:)

Thank you so much for reading and following this series. You can download WP MailChimp Plugin here.

Become a Sponsor